<template>
	<view class="detail">
		<image class="img" src="https://file.roumeiji.com/img/15.png" mode="widthFix"></image>
		<view class="title">
			YouMagic验真信息
		</view>
		<view class="li">
			<view>设备型号</view>
			<view>{{info.product_model}}</view>
		</view>
		<view class="li">
			<view>所属机构</view>
			<view>{{info.product_organization}}</view>
		</view>
		<view class="li">
			<view>所在省份</view>
			<view>{{info.product_province}}</view>
		</view>
		<view class="li">
			<view>所在城市</view>
			<view>{{info.product_city}}</view>
		</view>
		<view class="li">
			<view>验真次数</view>
			<view>第{{info.product_verification_count}}次</view>
		</view>
		<view class="li">
			<view>验证时间</view>
			<view v-if="info.updated_at">{{ getDate(info.updated_at)}}</view>
		</view>

		<view class="li">
			<view>使用者名称</view>
			<view>{{vuex_nickname ||''}}</view>
		</view>
		<view class="li">
			<view>手机号</view>
			<view>{{vuex_phone || ''}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad(e) {

			this.getDetail(e.id)
		},
		methods: {


			getDate(val) {

				let now = new Date(val)
				let year = now.getFullYear() // 得到年份
				let month = now.getMonth() // 得到月份
				let date = now.getDate() // 得到日期
				let hour = now.getHours()
				let Minutes = now.getMinutes()
				let Seconds = now.getSeconds()
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')

				hour = date.toString().padStart(2, '0')
				Minutes = date.toString().padStart(2, '0')
				Seconds = date.toString().padStart(2, '0')
				let defaultDate = `${year}-${month}-${date} ${hour}:${Minutes}:${Seconds}`
				return defaultDate
			},
			getDetail(id) {


				this.$u.api
					.detailinfo(id)
					.then((res) => {
						this.info = res
						let datas = JSON.parse(this.info.event_result_data)
						
						this.info.product_model  =datas?.product_model
						this.info.product_organization = datas?.product_organization
						this.info.product_city = datas?.product_city
						this.info.product_province = datas?.product_province
						this.info.product_verification_count = datas?.product_verification_count
						
						
						
					});
			}
		}
	}
</script>
<style>
	page {
		background: #f4f4f4;
	}
</style>
<style scoped lang="scss">
	.detail {
		margin: 14rpx 21rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		min-height: 100vh;
		position: relative;

		.title {
			padding: 125rpx 0 55rpx 0;
			text-align: center;
			font-size: 44rpx;
			font-family: Acumin Variable Concept;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 42rpx;
		}

		.li {
			padding: 30rpx 0;
			margin: 0 51rpx 0 46rpx;
			// position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;

			>view:first-child {

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #1A1A1A;
			}

			>view:last-child {

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #707070;
			}
		}

		// .li:before{
		//        content: '';
		//        position: absolute;
		//        width: 200%;
		//        height: 200%;
		//        border-bottom: 1px solid red;
		//        -webkit-transform-origin: 0 0;
		//        -moz-transform-origin: 0 0;
		//        -ms-transform-origin: 0 0;
		//        -o-transform-origin: 0 0;
		//        transform-origin: 0 0;
		//        -webkit-transform: scale(0.5, 0.5);
		//        -ms-transform: scale(0.5, 0.5);
		//        -o-transform: scale(0.5, 0.5);
		//        transform: scale(0.5, 0.5);
		//        -webkit-box-sizing: border-box;
		//        -moz-box-sizing: border-box;
		//        box-sizing: border-box;
		// }
		image {
			position: absolute;
			right: 0;
			top: 0;
		}

	}
</style>
